<template>
  <div class="goodsShuxingCreate">
    <!-- 导出按钮 -->
    <div class="import-btn">
      <el-button type="primary" size="small" @click="outfile">导出</el-button>
    </div>

    <el-card class="box-card">
      <!-- one------------------------------------------------------- -->
      <div slot="header" class="clearfix header">
        <span>创建商品属性</span>
        <el-button type="primary" round @click="createtwoFn">返回</el-button>
      </div>
      <!-- -------------------------------------------------------------- -->

      <!-- two------------------------------------------------------- -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="属性名称" prop="attr_name">
          <el-input v-model="ruleForm.attr_name"></el-input>
        </el-form-item>
        <el-form-item label="所属类型" prop="cat_id">
          <el-select v-model="ruleForm.cat_id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.cat_id"
              :label="item.cat_name"
              :value="item.cat_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- ------------------------------------------------------------- -->

        <!-- three------------------------------------------ -->
        <el-form-item label="单/双选属性" prop="only_many">
          <el-radio v-model="ruleForm.only_many" label="only">唯一</el-radio>
          <el-radio v-model="ruleForm.only_many" label="many">多选</el-radio>
        </el-form-item>
        <el-form-item label="值录入方式" prop="input_select">
          <el-radio v-model="ruleForm.input_select" label="input"
            >手动录入</el-radio
          >
          <el-radio v-model="ruleForm.input_select" label="select"
            >从下方选择</el-radio
          >
        </el-form-item>

        <!-- four----这是可选的input框------------------- -->
        <el-form-item
          label="可选值"
          prop="attr_values"
          v-show="ruleForm.input_select == 'xiafang'"
        >
          <el-input
            type="text"
            v-model="ruleForm.attr_values"
            placeholder="请输入可选值，多个值之间用英文','分隔开"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- ----------------------------------------------------------------------------- -->

        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        <!-- end------------------ -->
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { postShuxingCreate, getGoodsTypeApi } from "@/api";
var XLSX = require("xlsx");
export default {
  created() {
    getGoodsTypeApi({
      pagenum: 1,
      pagesize: 100
    }).then(res => {
      this.options = res.data.list;
    });
  },
  methods: {
    //提交
    submitForm(formName) {
      //this.$refs[formName].validate((valid) => {}
      this.$refs[formName].validate(valid => {
        if (valid) {
          // this.$message.success('发送异步请求');
          postShuxingCreate(this.ruleForm).then(res => {
            console.log(res);
            if (res.meta.state == 201) {
              this.$message.success(res.meta.msg);
              this.$router.push({ path: "/goods/attr" });
            } else {
              this.$message.error(res.meta.msg);
            }
          });
        }
      });
    },

    //取消
    resetForm(refName) {
      //  this.$refs[formName].resetFields();
      this.$refs[refName].resetFields();
    },

    //跳转
    createtwoFn() {
      this.$router.push({ path: "/goods/attr" });
    },

    //导出效果
    outfile() {
      var that = this;
      // var titleArr = Object.keys(that.tableData[0]);
      var titleArr = ["编号", "姓名", "手机号"];

      let tableData = [
        [1, "一", 11111111],
        [2, "一", 22222222],
        [3, "一", 333333333]
        // titleArr,
      ]; // 表格表头
      // this.tableData.forEach(item => {
      //     let rowData = []
      //     titleArr.map((key, index) => {
      //         rowData.push(item[key])
      //     })
      //     tableData.push(rowData)
      // })
      let ws = XLSX.utils.aoa_to_sheet(tableData);
      let wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "数据"); // 工作簿名称
      XLSX.writeFile(wb, "数据.xlsx"); // 保存的文件名
    }
  },

  data() {
    return {
      // pagenum: "",
      // pagesize: "",

      options: [],
      ruleForm: {
        attr_name: "",
        cat_id: "",
        input_select: "",
        attr_values: "",
        only_many: ""
      },
      rules: {
        cat_id: [
          { required: true, message: "请选择所属商品类型", trigger: "blur" }
        ],
        attr_name: [
          { required: true, message: "请输入属性名称", trigger: "blur" }
        ],
        only_many: [
          { required: true, message: "请至少选择一个选择", trigger: "blur" }
        ],
        input_select: [
          { required: true, message: "请选择值录入方式", trigger: "blur" }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.goodsShuxingCreate {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
